<template>
	<section class="success">
		<div class="pt30rem  bg-white experience-sucess-contain">
			<div class="align-center top-content pl30rem pr30rem ">
				<i class="iconfont icon-wancheng fs72 sucess-color"></i>
				<div class="mt15rem fs16">
					您已支付成功
				</div>	
				<small class="c-A0" v-if="data.activity_cate != 4 || data.posit_status !=1">
					请在预购结束后7天之内付尾款
				</small>						
			</div>		
				
			<div class="pt30rem bottom-content  bg-f5">
				<p class="align-center fs16 mb30rem bold">
					更多推荐
				</p>				
				<recommend-list></recommend-list>
			</div>			
		</div>
		<!-- 微信分享 -->		
		<div class="help-share" v-show="shareShow" @click="shareShow = false">
			<img src="../../assets/share.png" alt="">
		</div>		
	</section>
</template>
<script>
	import { getYGDetail, share, getWechatConfig }  from "@/api/goods-detail";	
	import { getRecommand } from "@/api/home";
	import { formatDate } from "@/utils/index";
	import $Modal	      from '@/utils/modal'; 
	import Countdown      from '@/components/Countdown';
	import RecommendList from '@/components/recommend-list';
	import { MessageBox,InfiniteScroll } from 'mint-ui';	
	export default{
		components:{
			Countdown,
			RecommendList
		},
		directives:{
			InfiniteScroll
		},
		data()
		{
			return{
				end_time  : this.$route.query.time,
				goods_id  : this.$route.query.goods_id,
				uid       : this.$route.query.fuid,
				is_tan    : this.$route.query.is_tan,
				img_url   : process.env.IMG_URL,
				data      : [],
				shareShow : false,
			}
		},
		filters:{
			formatDate(date, fmt)
			{
				let time = new Date(date);
				return formatDate(time,fmt);
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			goBack()
			{
				this.$router.go(-2);
			},
			loadData()
			{
				let params = {
					goods_id : this.goods_id,
					uid      : this.uid
				}
				getYGDetail(params).then( res => {
					this.data = res.data
					if(this.is_tan == '1')
					{
						// let message = `<div class='align-left'>
						// 		${res.data.coupon_txt}</div>`;
						MessageBox.confirm('', { 
							message: '快分享给好友一起拼单吧！', 
							title: '是否分享给好友', 
							confirmButtonText: '立即分享', 
							cancelButtonText: '取消' 
						}).then( res => {
							this.shareShow = true;
							this.getConfig();
						});
					}
				});
			},
			getConfig() { 
		        let url = location.href.split('#')[0] //获取锚点之前的链接
		        getWechatConfig(url).then(response => {
			        let res = response.data;
			        this.Share(res);
		        });
		    },
			// 微信分享
			Share(resData)
			{
				wx.config({
				    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				    appId: resData.appId, // 必填，公众号的唯一标识
				    timestamp: resData.timestamp, // 必填，生成签名的时间戳
				    nonceStr: resData.nonceStr, // 必填，生成签名的随机串
				    signature: resData.signature,// 必填，签名
				    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
				});

				let params = {
					goods_id : this.goods_id,
					fuid     : this.uid,
					order_id : this.$route.query.order_id
				}
				console.log(123213123);
				console.log(this.$route.query);
				console.log(params);
				//获取微信config
				share(params).then(res =>{
					console.log(res.data.link);
					let url = location.href.split('#')[0];
					let links = res.data.link;
			        let title = res.data.title;
			        let desc = res.data.content;
			        let imgUrl = res.data.img;
					wx.ready(()=>{
						wx.onMenuShareTimeline({
				            title: title, // 分享标题
				            desc: desc, // 分享描述
				            link: links, // 分享链接
				            imgUrl: imgUrl, // 分享图标
				            success: function() {
				              	alert("分享到朋友圈成功")
				            },
				            cancel: function() {
				              	alert("分享失败,您取消了分享!")
				            }
				          });
				          //微信分享菜单测试
				          wx.onMenuShareAppMessage({
				            title: title, // 分享标题
				            desc: desc, // 分享描述
				            link: links, // 分享链接
				            imgUrl: imgUrl, // 分享图标
				            success: function() {

							},
							cancel: function() {
								
							}
						});
					})
				});
			},
		}
	}
</script>

<style lang="less">
.success{
	.experience-sucess-contain{
		.list-ul{
			overflow: hidden;
			li{
				width: 48%;
				img{
					height: 300/28rem;
				}
				.count-down{
					span{
						background-color: #383838;
					}
					strong{
						i{
							background-color: #383838;
						}
					}
				}
				.experience{
		    		border-radius: 5/28rem;
		    		background-color: #ffdee5;
		    		padding:2/28rem 5/28rem;
		    		vertical-align: top;
	    		}
			}
		}
		.top-content{
			height: 29vh;
		}
		.fs72{
			font-size: 72px;
		}
		.sucess-color{
			color: #6BDF59;
		}
		.sucess-bg{
			background-color: #6BDF59;
		}
		.success-border{
			border:1px solid #6BDF59;
		}
		.c-A0{
			color: #A0A0A0;
		}
		
	}

	.help-share
	{
		z-index: 99;
		position: fixed;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,.8);
		width: 100%;
		height: 100%;
		img
		{
			width: 100%;
			display: block;
		}
	}
}
	
</style>